<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-icon-wrapper" style="background-color: #e6f7ff;">
          <BuildingIcon class="stat-icon" style="color: #1890ff;" />
        </div>
        <div class="stat-content">
          <div class="stat-title">资产总览</div>
          <div class="stat-value">{{ stats.asset_stats?.buildings }} 栋 / {{ stats.asset_stats?.units }} 单元</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-icon-wrapper" style="background-color: #e6fffb;">
           <UserIcon class="stat-icon" style="color: #13c2c2;" />
        </div>
        <div class="stat-content">
          <div class="stat-title">人员总览</div>
          <div class="stat-value">{{ stats.people_stats?.companies }} 家企业 / {{ stats.people_stats?.employees }} 人</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-icon-wrapper" style="background-color: #fff7e6;">
          <MoneyIcon class="stat-icon" style="color: #fa8c16;" />
        </div>
        <div class="stat-content">
          <div class="stat-title">本月收入 (元)</div>
          <div class="stat-value">{{ stats.finance_stats?.monthly_revenue }}</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-icon-wrapper" style="background-color: #fff1f0;">
          <BellIcon class="stat-icon" style="color: #f5222d;" />
        </div>
        <div class="stat-content">
          <div class="stat-title">待办工单</div>
          <div class="stat-value">{{ stats.service_stats?.pending_tasks }}</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { defineProps } from 'vue';
// 假设您使用了heroicons或类似的图标库
import { BuildingOfficeIcon as BuildingIcon, UserGroupIcon as UserIcon, BanknotesIcon as MoneyIcon, BellAlertIcon as BellIcon } from '@heroicons/vue/24/outline';


defineProps({
  stats: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped>
.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}
.stat-icon-wrapper {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
}
.stat-icon {
  width: 32px;
  height: 32px;
}
.stat-content {
  display: flex;
  flex-direction: column;
}
.stat-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #262626;
}
</style> 